<template>
  <div class="box" v-loading="loading">
    <div v-show="add">
      <el-card>
        <AddConfigure
          :configure="configure"
          @handleOutChainFlag="handleOutChainFlag"
          ref="configure"
        />
        <AddContent :content="content" :bizId="bizId" ref="content" v-show="!outChainFlag" />
        <AddAnnexes
          ref="annexes"
          :annexes="annexes"
          :moduleList="moduleList"
          :modelIdList="modelIdList"
          :bizId="bizId"
        />
      </el-card>
    </div>
    <div v-show="!add">
      <Previews :previewsObj="previewsObj" />
    </div>
    <el-card style="margin-top: 12px">
      <div>
        <el-button type="primary" @click="handleAdd(2)">提交</el-button>
        <el-button @click="handleAdd(1)">保存草稿</el-button>
        <el-button @click="handlePreviews" v-show="add && !outChainFlag"
          >预览</el-button
        >
        <el-button @click="handleBack" v-show="!add && !outChainFlag"
          >返回</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import AddConfigure from "./AddConfigure.vue";
import AddContent from "./AddContent.vue";
import AddAnnexes from "./AddAnnexes.vue";
import Previews from "./Previews.vue";

import {
  editArticleApi,
  getArticleDetailApi,
  getArticleModuleListApi,
} from "@/api/modules/article.api";
import { mapMutations } from "vuex";

export default {
  components: {
    AddConfigure,
    AddContent,
    AddAnnexes,
    Previews,
  },
  data() {
    return {
      visible: false,
      loading: true,
      type: 0,
      active: 0,
      add: true,
      previewsObj: {},
      outChainFlag: false,
      moduleList: [],
      id: "",
      bizId:"",
      form: {
        id: "",
        articleTitle: "",
      },
      configure: {
        articleTitle: "",
        outChainFlag: "",
        outChainAddress: "",
      },
      content: "",
      annexes: {
        moduleId: "",
        attachmentList: [],
        boldFlag: false,
        topFlag: false,
        pushSchool: false,
      },
      parentId: "",
      modelIdList: [],
    };
  },
  mounted() {
    this.getTableData();
    this.getDetail(this.$route.query.id);
    this.type = this.$route.query.type;
    this.bizId=this.$route.query.id;
  },

  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getDetail(id) {
      if (id) {
        this.moduleList = await getArticleModuleListApi();
        const res = await getArticleDetailApi(id);
        this.configure = res;
        // this.configure.name = res.name;
        // this.configure.isOut = res.isOut ? "0" : "1";
        this.outChainFlag = res.isOut;
        // this.configure.outHref = res.outHref;
        this.content = res.content;
        this.annexes.attachmentList = res.attachmentList;
        this.annexes.moduleId = res.moduleId;
        this.annexes.createDate = res.createDate;
        this.annexes.topFlag = res.topFlag;
        this.annexes.showLeft = res.showLeft;
        this.getModulesList(res.moduleId);

        // this.annexes.boldFlag = res.boldFlag;
        // this.annexes.topFlag = res.topFlag;
        // this.annexes.pushSchool = res.pushSchool;
        this.id = res.id;
        this.loading = false;
      }
    },
    async handleAdd(status) {
      const configureObj = this.$refs.configure.getContent();
      const content = this.$refs.content.getContent();
      const annexesObj = this.$refs.annexes.getContent();
      const obj = {
        ...configureObj,
        content,
        ...annexesObj,
        status,
        articleId: this.articleId,
      };
      obj.id = this.$route.query.id;
      obj.moduleId = obj.modelId.slice(-1)[0];
      if (!obj.showLeft) {
        obj.fileList = [];
      }
      delete obj.modelId;
      await editArticleApi(obj);
      this.$message({
        message: "成功",
        type: "success",
      });
      if (this.type === "0") {
        await this.$router.push({ path: "/writings/list" });
        this.setBreadcrumb([
          {
            name: "文章管理",
            path: "/writings",
          },
          {
            name: "文章列表",
            path: "/writings/list",
          },
        ]);
      } else {
        await this.$router.push({ path: "/writings/sketch-box" });
        this.setBreadcrumb([
          {
            name: "文章管理",
            path: "/writings",
          },
          {
            name: "草稿箱",
            path: "/writings/sketch-box",
          },
        ]);
      }
    },
    handlePreviews() {
      const configureObj = this.$refs.configure.getContent();
      const contentObj = this.$refs.content.getContent();
      const annexesObj = this.$refs.annexes.getContent();
      const obj = {
        ...configureObj,
        content: contentObj,
        fileList: annexesObj.fileList,
        status: 1,
        // obj.topFlag = obj.checkedCities?.includes("置顶");
        // obj.pushSchool = obj.checkedCities?.includes("推送学校");
      };
      // obj.boldFlag = obj.checkedCities?.includes("加粗");
      obj.outChainFlag = obj.outChainFlag === "0";
      // delete obj.checkedCities;
      this.previewsObj = obj;
      this.add = false;
    },
    handleBack() {
      this.add = true;
    },
    handleOutChainFlag(value) {
      this.outChainFlag = value;
    },
    async getTableData() {},
    getModulesList(moduleId) {
      this.getTree(this.moduleList, moduleId);
      let arr = [];
      if (this.parentId !== "0") {
        arr = [this.parentId, moduleId];
      } else {
        arr = [moduleId];
      }
      this.modelIdList = arr;
    },
    getTree(data, id) {
      data.map((item) => {
        if (item.moduleId === id) {
          this.parentId = item.pId;
        } else {
          if (item.childList?.length > 0) {
            this.getTree(item.childList, id);
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.box {
  height: calc(100vh - 60px - 50px - 24px);
  overflow: auto;
}
</style>
